<template>
  <div class="app-container home">
    <el-row :gutter="20">
      <el-col :sm="24" :lg="12" style="padding-left: 20px">
        <el-form ref="formRef" style="max-width: 500px" :model="numberValidateForm" label-width="auto"
          class="demo-ruleForm demo-form-inline">
          <el-form-item label="参数" prop="message" :rules="[{ required: true, message: 'message is required' }]">
            <el-input v-model.number="numberValidateForm.message" type="textarea" autocomplete="off" />
          </el-form-item>
          <el-form-item>
            <el-button :loading="loading" type="primary" @click="submitForm(formRef)">Submit</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-divider />
    <el-row :gutter="20">
      <el-col :span="24" style="padding-left: 20px">
        <div class="mark-down-content" v-loading="loading" element-loading-text="Loading...">
          <v-md-preview :text="markdownContent" />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="Index">
import { reactive, ref, onMounted } from "vue";
import { getGenerate } from "@/api/skillsContest/generate.js";

// loading
const loading = ref(false);

// form表单
const formRef = ref();
const numberValidateForm = reactive({
  message: "",
});

// 展示结果
const markdownContent = ref("");

onMounted(() => { });

// 表单提交
const submitForm = (formEl) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      getOpenApi();
    } else {
      console.log("error submit!");
    }
  });
};

// 一个简单的java调用ai的openapi
function getOpenApi() {
  loading.value = true;
  markdownContent.value = "";
  getGenerate(numberValidateForm)
    .then((res) => {
      loading.value = false;
      markdownContent.value = res?.generation;
    })
    .catch((error) => {
      console.log(error);
    });
}

</script>

<style scoped lang="scss">
.home {
  .mark-down-content {
    height: calc(65vh - 0px);
    overflow: auto;
  }
}
</style>
